<template>
  <el-card>
    <FilterBox
      :column="column"
      :data-obj.sync="listQuery"
      @search="fetchData"
    />
    <el-row class="mt10 mb10">
      <el-button type="primary" @click="toAdd">新增</el-button>
    </el-row>
    <Table :field-list="fieldList" :data="list">
      <template v-slot:set="{ row }">
        <el-button type="text" @click="toEdit(row)">编辑</el-button>
        <el-button type="text" @click="toDetail(row)">详情</el-button>
        <el-button class="color-red" type="text" @click="delHandler(row)"
          >删除</el-button
        >
      </template>
    </Table>
    <Pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.pageNumber"
      :limit.sync="listQuery.pageSize"
      @pagination="fetchData"
    />
  </el-card>
</template>

<script>
import { getNewsList, delNews } from "@/api/news";
import { getCateList } from "@/api/index";
import FilterBox from "@/components/FilterBox/index.vue";
import Table from "@/components/Table/index.vue";
import Pagination from "@/components/Pagination/index.vue";
export default {
  name: "NewsList",
  components: { FilterBox, Table, Pagination },
  data() {
    return {
      currentRole: "adminDashboard",
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        total: 0,
      },
      column: [
        {
          type: "select",
          label: "类型",
          fieldName: "category_id",
          list: () => this.lst_cate,
          labelField: "name",
          valueField: "id",
        },
      ],
      fieldList: [
        {
          label: "操作",
          prop: "set",
          type: "slot",
          slotName: "set",
          width: "160",
        },
        { label: "标题", prop: "title", minWidth: "120" },
        { label: "分类ID", prop: "category_id", minWidth: "120" },
        { label: "创建时间", prop: "createtime_text", width: "170" },
        { label: "更新时间", prop: "updatetime_text", width: "170" },
      ],
      list: [],
      lst_cate: [],
    };
  },
  async created() {
    let res = await getCateList({ pid: "17" });
    this.lst_cate = res.data || [];
    this.fetchData();
  },
  methods: {
    async fetchData() {
      let res = await getNewsList(this.listQuery);
      this.list = res?.data?.list || [];
      this.listQuery.total = res.data.total;
    },
    toAdd() {
      this.$router.push("/add-new");
    },
    toDetail(row) {
      this.$router.push("/detail-new?type=detail&id=" + row.id);
    },
    toEdit(row) {
      this.$router.push("/edit-new?id=" + row.id);
    },
    async delHandler({ id }) {
      if (!id) return;
      await this.$confirm("确认要删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await delNews({ id });
      this.$message.success("删除成功");
      this.fetchData();
    },
  },
};
</script>
